import React, {Component} from 'react';
import {CSSTransition, SwitchTransition} from "react-transition-group";
import './style.css'

class SwitchVideo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false,
        }
    }

    change = function () {
        this.setState({isLogin: !this.state.isLogin});
    };

    render() {
        const {isLogin} = this.state;
        return (
            <div>
                <SwitchTransition mode="out-in">
                    <CSSTransition
                        key={isLogin ? 'login' : 'register'}
                        classNames='login'
                        timeout={1000}
                    >
                            <button onClick={e => this.change()}>{ isLogin ? '退出' : '登录' }</button>
                    </CSSTransition>
                </SwitchTransition>
            </div>
        );
    }
}

export default SwitchVideo;